<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>index</title>
		
		<link rel="stylesheet" type="text/css" href="css/style.css" title="primaria"/>
		<link rel="alternate stylesheet" type="text/css" href="css/styleAlt.css" title="alternativa" />
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
		
		<script language="JavaScript" src="js/loadXML.js" type="text/javascript"></script>
		<script language="JavaScript" src="js/script.js" type="text/javascript"></script>
		<script language="JavaScript" src="js/cufon-yui.js" type="text/javascript"></script>
		<script language="JavaScript" src="js/NeverSayNever_400.font.js" type="text/javascript"></script>
		 <script type="text/javascript">
            Cufon.replace('h1, h2, h3, h4');
            //Cufon.replace('.tabs label');
        </script>
        <!--Para scrollbar:-->
        <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
		
		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
	
	</head>

	<body>
		<img id="imgConPromo" alt="imgConPromo" src="img/promo.png" />
		<div id="recuadro">
			<img id="cuadro" alt="cuadro" src="img/cuadro.png" />
		</div>
		<div id="header">
			<div id="header-content">
				<img id="logo" alt="logo" src="img/logo_choco2.png" />
			</div>
			<div id="contenido">
			</div>
		</div>
		<div id="banner">
			<section class="tabs">
			    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
			    <label for="tab-1" class="tab-label-1">Chocolate</label>
			 
			    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
			    <label for="tab-2" class="tab-label-2">Dulce</label>
			 
			    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
			    <label for="tab-3" class="tab-label-3">Crema</label>
			 
			    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
			    <label for="tab-4" class="tab-label-4">Frutal</label>
			 
			    <div class="clear-shadow"></div>
			 
			    <div class="contenido">
			        <div class="contenido-1">
			        	<h2>Chocolates</h2>
						<div id="mcs_container1">
							<div class="customScrollBox">
								<div class="container">
									<div class="content">
										<ul class="lista" id="ulchocolate">
										<!--
							        		<li class="element">
							        			<img id="img_02" class="cuad" alt="logo" src="img/chocolate.jpg"/>
							        			<p class="nombre">Chocolate</p>
							        			<button  class="agrega" value="chocolata#12.5" onclick="agregar(this)"></button>
							        			<p class="precioUnidad">$ 26.50 (1/2 Kg)</p>
							        			<p class="descripcion">Una descripcion cualquiera que sea relativamente larga y que tenga muchas palabras como para que tenga que </p>  			
							        		</li>
							        		<li class="element">
							        			<a><img class="cuad" alt="logo" src="img/chocolateAB.jpg"/></a>
							        			<div class="imagen"><img src="img/chocolateAB.jpg"/></div>
							        			<p class="nombre">Chocolate con Brownie</p>
							        			<p class="descripcion">Dulce de leche intenso con trocitos de brownie con nuez bañados en salsa de dulce de leche.</p>
							        		</li>
							        		<li class="element">
							        			<a><img class="cuad" alt="logo" src="img/chocolateAB.jpg"/></a>
							        			<div class="imagen"><img src="img/chocolateAB.jpg"/></div>
							        			<p class="nombre">Chocolate con Brownie</p>
							        			<p class="descripcion">Dulce de leche intenso con trocitos de brownie con nuez bañados en salsa de dulce de leche.</p>
							        		</li>
							        		<li class="element">
							        			<a><img class="cuad" alt="logo" src="img/chocolateAB.jpg"/></a>
							        			<div class="imagen"><img src="img/chocolateAB.jpg"/></div>
							        			<p class="nombre">Chocolate con Brownie</p>
							        			<p class="descripcion">Dulce de leche intenso con trocitos de brownie con nuez bañados en salsa de dulce de leche.</p>
							        		</li>
							        		<li class="element">
							        			<a><img class="cuad" alt="logo" src="img/chocolateAB.jpg"/></a>
							        			<div class="imagen"><img src="img/chocolateAB.jpg"/></div>
							        			<p class="nombre">Chocolate con Brownie</p>
							        			<p class="descripcion">Dulce de leche intenso con trocitos de brownie con nuez bañados en salsa de dulce de leche.</p>
							        		</li>-->
							        	</ul>
									</div>
								</div>
								<div class="dragger_container">
									<div class="dragger"></div>
								</div>
							</div>
							<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
						</div>
			        </div>
			        <div class="contenido-2">
			            <h2>Dulce de Leche</h2>
			            <div id="mcs_container2">
							<div class="customScrollBox">
								<div class="container">
									<div class="content">
										<ul class="lista" id="uldulce">
							        	</ul>
									</div>
								</div>
								<div class="dragger_container">
									<div class="dragger"></div>
								</div>
							</div>
							<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
						</div>
			        </div>
			        <div class="contenido-3">
			            <h2>Crema</h2>
			            <div id="mcs_container3">
							<div class="customScrollBox">
								<div class="container">
									<div class="content">
										<ul class="lista" id="ulcrema">
							        	</ul>
									</div>
								</div>
								<div class="dragger_container">
									<div class="dragger"></div>
								</div>
							</div>
							<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
						</div>
			        </div>
			        <div class="contenido-4">
			            <h2>Frutal</h2>
			            <div id="mcs_container4">
							<div class="customScrollBox">
								<div class="container">
									<div class="content">
										<ul class="lista" id="ulfrutal">
							        	</ul>
									</div>
								</div>
								<div class="dragger_container">
									<div class="dragger"></div>
								</div>
							</div>
							<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
						</div>
			        </div>
			    </div>
			</section>
			<div id="promociones">
				<h2>Promociones para tentarte...</h2>
				<ul id="listaProm">
					<!--<li class="promo"><img src="img/heladito.png" /><p class="nom">Nombre</p><p class="desc">Llevandote un kilo del helado que más te guste te hacemos un 5% de descuento.</p></li>
					<li class="promo"><img src="img/heladito.png" /><p class="nom">Nombre1</p><p class="desc">Llevandote un kilo del helado que más te guste te hacemos un 5% de descuento.</p></li>
					<li class="promo"><img src="img/heladito.png" /><p class="nom">Nombre2</p><p class="desc">Llevandote cinco kilos o  más de los gustos de helado que prefieras tenes un 30% de descuento.</p></li>
				--></ul>
			</div>	
			
		</div>
		<div id="dialogo">
			<div id="titulo">About - Chocobytes</div>
     		<div id="texto">
          		<p id="primero">Desarrolladores:</p>
          		<p>Masserini Mauro (LU: 81810)</p>
          		<p>Zapata Lucia (LU: 87355)</p>
          		<img src="img/heladito.png"/>
          	</div>
          	<div id="foot">	
          		<p onclick='overlay()'>Cerrar</p>
     		</div>
		</div>
		<div id="footer">
			<div id="footer-content">
				<ul id="navigation-footer">
					<li>
						<img id="logo-foot" alt="logo_footer" src="img/logo_white_small.png" />
					</li>
					<li>
						<h3>
							<a href="#" onclick="cambiarEstilo()">Cambiar estilo</a>
						</h3>
					</li>
					<li>
						<h3>
							<a href="readme.html">Readme</a>
						</h3>
					</li>
					<li>
						<h3 id="about"><a onclick='overlay()'>About</a></h3>
					</li>
				</ul>
			</div>
		</div>
		<div id="panel">
			 <h2>Hace tu Pedido</h2>
			 
			 <div id="mcs_container5">
				<div class="customScrollBox">
					<div class="container">
						<div class="content">
							<ul class="pedidos" id="ulPedidos">
							</ul>
						</div>
					</div>
					<div class="dragger_container">
						<div class="dragger"></div>
					</div>
				</div>
			</div>
			 
			 <h3 id="total">Total: $0</h3>			 
		</div>
		<script>
		$(window).load(function() {
		    $("#mcs_container1").mCustomScrollbar("vertical",400,"easeOutCirc",1.20,"fixed","yes","yes",10);
		    $("#mcs_container2").mCustomScrollbar("vertical",400,"easeOutCirc",1.20,"fixed","yes","yes",10);
		    $("#mcs_container3").mCustomScrollbar("vertical",400,"easeOutCirc",1.20,"fixed","yes","yes",10);
		    $("#mcs_container4").mCustomScrollbar("vertical",400,"easeOutCirc",1.20,"fixed","yes","yes",10);
		    $("#mcs_container5").mCustomScrollbar("vertical",400,"easeOutCirc",1.20,"fixed","yes","yes",10);
		});
		</script>
		

		<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"></script>
	</body>
</html>
